<template>
  <div id="Main_body">
    <div id="Header">
      <div id="Logo">
        <img src="../assets/index_images/LOGO.jpg" alt="Logo" id="Logo_img"/>
      </div>
      <div id="Name">
        <h1>武汉市路通市政工程质量检测中心</h1>
        <!-- 	<br /> -->
        <h4>Wuhan LUTONG Municipal Engineering Quality Testing Center</h4>
      </div>
    </div>
    <div id="Row_Pictuer">
      <div id="Store_Picture">
        <img src="../assets/index_images/lutong.jpg" alt="面貌展示" style="display: block;"/>
        <img src="../assets/index_images/hanjie.jpg" alt="面貌展示"/>
        <img src="../assets/index_images/lutong.jpg" alt="面貌展示"/>
        <img src="../assets/index_images/jianghanlu.jpg" alt="面貌展示"/>
        <img src="../assets/index_images/lutong.jpg" alt="面貌展示"/>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div id="Introduction">
      <h2>中心简介</h2>

      
      <br/>
      <p>{{ `\xa0` }}{{ `\xa0` }}{{ `\xa0` }}{{ `\xa0` }}
        武汉路通市政工程质量检测中心位于武汉市江岸区胜利街305号，紧邻武汉市城市管理局。
        主要从事与建设工程质量相关的检测工作，其中包括地基基础检测、主体结构检测、钢结构检
        测、见证取样检测、室内环境检测、建筑设备安装检测（筹备中)等业务。检测参数共计630余
        项，办公场所面积2000多平方米，检测设施环境符合国家有关标准要求。拥有与检测工作相关
        的专业设备450台(套)，价值650余万元，其中道路综合检测车、道路弯沉检测车、电液伺服压
        力机CHT4206、PS-200钢筋探测仪和气相色谱仪7820A等设备处于国内同类试验室的领先水平。
        <br/>
        {{ `\xa0` }}{{ `\xa0` }}{{ `\xa0` }}{{ `\xa0` }}
        武汉路通市政工程质量检测中心作为全国建设工程质量检测AAA级信用机构、湖北省建设工程
        质量检测AAA级信用机构，多次获得湖北省建设检测管理行业先进单位荣誉称号，连续被武汉
        市城乡建设委员会授予年度建设工程质量管理先进单位、被武汉市江岸区政府评为武汉市江岸
        区文明建设单位。
        <br/>
      </p>

    </div>

    <div id="Slogan">
      <div id="Slogan_Header">
        <div id="Slogan_title">
          <h3> &nbsp;&nbsp;安全生产 “八荣八耻” </h3>
        </div>
        <div id="Slogan_title2">
          <h5>Safety Production Warning Slogan</h5>
        </div>
      </div>
      <div id="Slogan_Body">
        <br/><br/><br/>
        <p>以重视安全为荣，以忽视安全为耻</p>
        <p>以遵纪守法为荣，以违法乱纪为耻</p>
        <p>以规范管理为荣，以粗放管理为耻</p>
        <p>以自觉主动为荣，以被动应付为耻</p>
        <p>以关爱健康为荣，以蔑视生命为耻</p>
        <p>以现场整洁为荣，以脏乱无序为耻</p>
        <p>以安全先进为荣，以安全落后为耻</p>
        <p>以平安和谐为荣，以发生事故为耻</p>
      </div>
    </div>

    <div id="Target">
      <div id="Target1">
        <img src="../assets/index_images/beiwan.jpg" alt="背景图"/>
        <div id="Target1_Word" :class="xianshi" @click="targetShow">
          <h1 id="Target1_Word_title" :class="biaoti">质量方针</h1>
          <h3 id="Target1_Word_content" :class="neirong"><br/><br/>以科学、公正、高效、服务的态度为客户提供准确、可靠的检测服务。</h3>
        </div>
      </div>
      <div id="Target2">
        <img src="../assets/index_images/liken.jpg" alt="背景图"/>
        <div id="Target2_Word" :class="xianshi2" @click="targetShow2">
          <h1 id="Target2_Word_title"  :class="biaoti2">质量承诺</h1>
          <h3 id="Target2_Word_content" :class="neirong2">
            <br/> {{ `\xa0` }}
            为客户提供客观、准确、可靠的检测服务，并提供合法、科学、公正的检测结果。
            为客户保密、对提供的试件及技术资料保护其所有权。遵守与客户约定的服务，合理收费，诚实操作，对出具的检测
            报告承担相应的法律责任。</h3>
        </div>
      </div>
    </div>
    <div id="Bottom">
      <h5 id="instructions">若有任何问题请联系网站开发人员</h5>
      <!-- <br><br> -->
      <h5 id="Copyright_Notice">©2003-2023
        <FENGLINGSHUISHE class="COM">,ALL&nbsp;RIGHTS&nbsp;RESERVED.
          本站发布的所有内容，未经许可，不得转载，详见《知识产权声明》
        </FENGLINGSHUISHE>
      </h5>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.4.0",
      xianshi: 'normal',
      biaoti:'changgui',
      neirong:'yincang',
      xianshi2:'normal2',
      biaoti2:'changgui2',
      neirong2:'yincang2',
    };
  },
  methods: {
    targetShow() {
      this.xianshi = 'unnormal'
      this.biaoti ='chufa'
      this.neirong = 'tanchu'
      // goTarget(href) {
      // window.onload = function () {
      //   //轮播图
      //   let row = document.getElementById("Store_Picture");
      //   let imgs = row.getElementsByTagName('img');
      //   let lis = row.getElementsByTagName('li');
      //
      //   let c = 0;  //总控变量：用于标记当前显示的图片序号
      //   //自动轮播
      //   let timer = setInterval(function () {    //创建定时器
      //     c++;           //开始计数，标记加一
      //     if (c == 5) {     //建立循环，当本次循环结束时，从第一个重新开始
      //       c = 0;
      //     }
      //     for (let i = 0; i < 5; i++) {       //每次循环开始先将所有元素置为初始状态
      //       imgs[i].style.display = 'none';
      //       lis[i].style.background = 'black';
      //     }
      //     imgs[c].style.display = 'block';    //将要显示的图片和标签绑定目标样式
      //     lis[c].style.background = '#A10000';
      //   }, 1000)
      //   //手动轮播
      //   for (let i = 0; i < lis.length; i++) {
      //     lis[i].Number = i
      //
      //     lis[i].onmouseover = function () {          //鼠标移入事件
      //       clearInterval(timer);                 //停止定时器
      //       for (let i = 0; i < 5; i++) {
      //         imgs[i].style.display = 'none';
      //         lis[i].style.background = 'black';
      //       }
      //       imgs[this.Number].style.display = 'block';
      //       lis[this.Number].style.background = '#A10000';
      //     }
      //
      //     lis[i].onmouseout = function () {            //鼠标移出事件
      //       c = this.Number;
      //       timer = setInterval(function () {
      //                c++;           //开始计数，标记加一
      //         if (c == 5) {     //建立循环，当本次循环结束时，从第一个重新开始
      //           c = 0;
      //         }
      //         for (let i = 0; i < 5; i++) {       //每次循环开始先将所有元素置为初始状态
      //                imgs[i].style.display = 'none';
      //                lis[i].style.background = 'black';
      //         }
      //                imgs[c].style.display = 'block';    //将要显示的图片和标签绑定目标样式
      //                lis[c].style.background = '#A10000';
      //       }, 1000)
      //     }
      //   }
      // }


    },
    targetShow2() {
      this.xianshi2 = 'unnormal2'
      this.biaoti2 = 'chufa2'
      this.neirong2 = 'tanchu2'
    },
    bubble() {
      //轮播图
      let row = document.getElementById("Store_Picture");
      let imgs = row.getElementsByTagName('img');
      let lis = row.getElementsByTagName('li');

      let c = 0;  //总控变量：用于标记当前显示的图片序号
      //自动轮播
      let timer = setInterval(function () {    //创建定时器
        c++;           //开始计数，标记加一
        if (c == 5) {     //建立循环，当本次循环结束时，从第一个重新开始
          c = 0;
        }
        for (let i = 0; i < 5; i++) {       //每次循环开始先将所有元素置为初始状态
          imgs[i].style.display = 'none';
          lis[i].style.background = 'black';
        }
        imgs[c].style.display = 'block';    //将要显示的图片和标签绑定目标样式
        lis[c].style.background = '#A10000';
      }, 1000)
      //手动轮播
      for (let i = 0; i < lis.length; i++) {
        lis[i].Number = i

        lis[i].onmouseover = function () {          //鼠标移入事件
          clearInterval(timer);                 //停止定时器
          for (let i = 0; i < 5; i++) {
            imgs[i].style.display = 'none';
            lis[i].style.background = 'black';
          }
          imgs[this.Number].style.display = 'block';
          lis[this.Number].style.background = '#A10000';
        }

        lis[i].onmouseout = function () {            //鼠标移出事件
          c = this.Number;
          timer = setInterval(function () {
            c++;           //开始计数，标记加一
            if (c == 5) {     //建立循环，当本次循环结束时，从第一个重新开始
              c = 0;
            }
            for (let i = 0; i < 5; i++) {       //每次循环开始先将所有元素置为初始状态
              imgs[i].style.display = 'none';
              lis[i].style.background = 'black';
            }
            imgs[c].style.display = 'block';    //将要显示的图片和标签绑定目标样式
            lis[c].style.background = '#A10000';
          }, 1000)
        }
      }
    }
  },
  mounted() {
    this.bubble()
  },
  watch: {
    //右下侧动态栏

    // let UpSlide1 = document.getElementById("Target1_Word"),
    // let title1 = document.getElementById("Target1_Word_title"),
    // let content1 = document.getElementById("Target1_Word_content"),
    // UpSlide1.onmouseover = function() {                              //左侧动态栏
    // UpSlide1.style.top = '150px';
    // UpSlide1.style.height = '300px';
    // title1.style.display = 'none';
    // content1.style.display = 'block';
  }
  // UpSlide1.onmouseout = function(){
  //   UpSlide1.style.top = '350px';
  //   UpSlide1.style.height = '100px';
  //   title1.style.display = 'block';
  //   content1.style.display = 'none';
  // },
  //
  // let UpSlide2 = document.getElementById("Target2_Word"),         //右侧动态栏
  // let title2 = document.getElementById("Target2_Word_title"),
  // let content2 = document.getElementById("Target2_Word_content"),
  // UpSlide2.onmouseover = function(){
  //   UpSlide2.style.top = '70px';
  //   UpSlide2.style.height = '380px';
  //   title2.style.display = 'none';
  //   content2.style.display = 'block';
  // },
  // UpSlide2.onmouseout = function(){
  //   UpSlide2.style.top = '350px';
  //   UpSlide2.style.height = '100px';
  //   title2.style.display = 'block';
  //   content2.style.display = 'none';
  //   }
  //

}
</script>

<style scoped lang="scss">
*{
  margin: 0;
}
#Main_body{
  width: 100%;
  height: 1140px;
  margin: 0px auto;
  position: absolute;
  /* background: snow; */
  /* opacity:80%; */
  z-index:1;
}
#Header{
  width: 100%;
  height: 80px;
  margin: 0px auto;
  position: absolute;
  background:snow;
  /* opacity: 80%; */
  z-index:2;
}
#Logo{
  top: 0px;
  width: 97.4px;
  height: 74.8px;
  margin: 0px 10px 5px;
  position: absolute;
  /* opacity: 80%; */
  z-index:2;
}
#Logo_img{
  width: 97.4px;
  height: 74.8px;
  margin: 0px auto;
  position: absolute;
}
#Name{
  width: 1000px;
  height: 60px;
  margin: 10px 0px 10px;
  position: absolute;
  opacity: 80%;
  left: 100px;
  z-index:2;
}
#Row_Pictuer{
  top: 85px;
  left: 20px;
  width: 600px;
  height:375px;
  margin: 0px auto;
  position: absolute;
  overflow: hidden;
  /* background: skyblue; */
  /* opacity: 80%; */
  z-index:2;
}
#Store_Picture{
  width: 3000px;
  height: 375px;
  margin: 0px auto;
  position: absolute;
  /* display: none; */
}
#Store_Picture img{
  float: left;
  width: 600px;
  height: 375px;
}
#Row_Pictuer ul{
  position: absolute;
  left: 200px;
  bottom:17px;
}
#Row_Pictuer ul li{
  list-style: none;
  width: 12px;
  height: 12px;
  background: white;
  float: left;
  margin-right: 8px;
  border-radius: 50%;
}
#Introduction{
  top: 85px;
  left: 38%;
  width:900px;
  height:280px;
  margin: 0px auto;
  background: lightblue;
  opacity: 70%;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  z-index:2;
}
#Introduction h2{
  text-align: center;
}
#Introduction p{
  font-family: sans-serif,"宋体";
  font-size: 17px;
  color: black;

}
#Slogan{
  top: 42%;
  left: 1%;
  width: 600px;
  height:450px;
  margin: 0px auto;
  background:white;
  opacity: 80%;
  border-radius: 3%;
  /* padding: 10px; */
  position: absolute;
  z-index:2;
}
#Slogan_Header{
  top: 0px;
  left: 150px;
  width: 300px;
  height:70px;
  margin: 0px auto;
  background: white;
  position: absolute;
  z-index:4;
}
#Slogan_title{
  top: 10px;
  left: 25px;
  width: 250px;
  height:40px;
  margin: 0px auto;
  background: #030066;
  border-radius: 8px;
  position: absolute;
  z-index:5;
}
#Slogan_title h3{
  text-align: center;
  line-height: 40px;
  color: aliceblue;
  font-family: sans-serif;
}
#Slogan_title2{
  top: 55px;
  left: 5px;
  width: 290px;
  height:15px;
  margin: 0px auto;
  position: absolute;
  z-index:5;
}
#Slogan_Header h5{
  /* vertical-align: bottom; */
  text-align: center;
  /* line-height: 40px; */
  color:  #030066;
  font-family: sans-serif;
}
#Slogan_Body{
  top: 33px;
  left: 30px;
  width: 540px;
  height:275px;
  margin: 0px auto;
  border: 3px solid #425677;
  border-radius: 3%;
  position: absolute;
  z-index:3;
}
#Slogan_Body p{
  text-align: center;
  line-height: 25px;
  color:#030066 ;
  font-family: sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
}
#Target{
  top: 35%;
  left: 40%;
  width: 900px;
  height:380px;
  margin: 0px auto;
  //background:yellow;
  opacity: 80%;
  /* border-radius: 3%; */
  /* padding: 10px; */
  position: absolute;
  z-index:2;
}
#Target1{
  top: 0px;
  left: 35px;
  width: 337.5px;
  height:380px;
  margin: 0px auto;
  border-radius: 2%;
  position: absolute;
  z-index:3;
}
#Target1 img{
  top: 0px;
  left:0px;
  width: 337.5px;
  height:380px;
  margin: 0px auto;
  border-radius: 2%;
  position: absolute;
  z-index:3;
}
#Target2{
  top: 0px;
  left: 485px;
  width: 337.5px;
  height:380px;
  margin: 0px auto;
  border-radius: 2%;
  position: absolute;
  z-index:3;
}
#Target2 img{
  top: 0px;
  left: 0px;
  width: 337.5px;
  height:380px;
  margin: 0px auto;
  border-radius: 2%;
  position: absolute;
  z-index:3;
}
//#Target1_Word{
//  top: 350px;
//  left: 0px;
//  width: 337.5px;
//  height:100px;
//  margin: 0px auto;
//  background:skyblue;
//  border-radius: 2%;
//  position: absolute;
//  z-index:4;
//}
.normal {
  top: 280px;
  left: 0px;
  width: 337.5px;
  height: 100px;
  margin: 0px auto;
  background: skyblue;
  border-radius: 2%;
  position: absolute;
  z-index: 4;
}

.unnormal {
  top: 150px;
  left: 0px;
  width: 337.5px;
  height: 230px;
  margin: 0px auto;
  background: skyblue;
  border-radius: 2%;
  position: absolute;
  z-index: 4;
}

//#Target1_Word_title{
//  text-align: center;
//  /* line-height: 40px; */
//  /* color:#030066 ; */
//  font-family: sans-serif;
//  font-size: 60px;
//  letter-spacing: 5px;
//  display: block;
//}
.changgui {
  text-align: center;
  /* line-height: 40px; */
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  display: block;
}
.chufa{
  text-align: center;
  /* line-height: 40px; */
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  display: none;
}
//#Target1_Word_content{
//  text-align: center;
//  line-height: 40px;
//  /* color:#030066 ; */
//  font-family: sans-serif;
//  font-size: 25px;
//  letter-spacing: 3px;
//  display: none;
//}
.yincang {
  text-align: center;
  line-height: 40px;
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
  display: none;
}
.tanchu{
  text-align: center;
  line-height: 40px;
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
  display: block;
}
//#Target2_Word{
//  top: 350px;
//  left: 0px;
//  width: 337.5px;
//  height:100px;
//  margin: 0px auto;
//  background:skyblue;
//  border-radius: 2%;
//  /* padding: 3px; */
//  position: absolute;
//  z-index:4;
//}
.normal2 {
  top: 280px;
  left: 0px;
  width: 337.5px;
  height: 100px;
  margin: 0px auto;
  background: skyblue;
  border-radius: 2%;
  /* padding: 3px; */
  position: absolute;
  z-index: 4;
}
.unnormal2{
  top: 70px;
  left: 0px;
  width: 337.5px;
  height: 310px;
  margin: 0px auto;
  background: skyblue;
  border-radius: 2%;
  /* padding: 3px; */
  position: absolute;
  z-index: 4;
}
//#Target2_Word_title{
//  text-align: center;
//  /* line-height: 40px; */
//  /* color:#030066 ; */
//  font-family: sans-serif;
//  font-size: 60px;
//  letter-spacing: 5px;
//  display: block;
//}
.changgui2 {
  text-align: center;
  /* line-height: 40px; */
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  display: block;
}
.chufa2 {
  text-align: center;
  /* line-height: 40px; */
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  display: none;
}
//#Target2_Word_content{
//  text-align: center;
//  line-height: 40px;
//  /* color:#030066 ; */
//  font-family: sans-serif;
//  font-size: 20px;
//  letter-spacing: 3px;
//  display: none;
//}
.yincang2 {
  text-align: center;
  line-height: 40px;
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  display: none;
}
.tanchu2 {
  text-align: center;
  line-height: 29px;
  /* color:#030066 ; */
  font-family: sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
  display: block;
}
#Bottom{
  top: 70%;
  width: 100%;
  height: 60px;
  margin: 0px auto;
  position: absolute;
  background: skyblue;
  /* opacity: 80%; */
  z-index:2;
}
#instructions{
  top:5px;
  position: relative;
  color:snow;
  font-size: 15px;
  text-align: center;
}
#Copyright_Notice{
  top: 10px;
  position: relative;
  color:snow;
  font-size: 15px;
  text-align: center;
}
</style>

